<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>3D-美女图库</title>

</head>
<body>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/pictureViewer.css">
<script src="js/three.min.js" ></script>
<script src="js/tween.min.js" ></script>
<script src="js/TrackballControls.js" ></script>
<script src="js/CSS3DRenderer.js" ></script>
<script src="js/main.js" ></script>
<script src="js/jquery-1.8.2.min.js" ></script>
<script src="js/jquery.mousewheel.min.js"></script>
<script src="js/pictureViewer.js"></script>

<div id="container"></div>
<div id="info">3D图库</div>
<div id="menu">
<button id="table">表面</button>
<button id="sphere">球体</button>
<button id="helix">螺旋</button>
<button id="grid">网格</button>
</div>

<script>
	var s = "<img src='images/1.jpg' >"; 
var table = [
	
	, "<img src='images/1.jpg' >", , -20, -5,
	, "<img src='images/2.jpg' >", ,  -5, -5,
	, "<img src='images/3.jpg' >", ,  10, -5,
	, "<img src='images/4.jpg' >", ,  25, -5,
	, "<img src='images/5.jpg' >", ,  40, -5,
	, "<img src='images/6.jpg' >", , -20,  5,
	, "<img src='images/7.jpg' >", ,  -5,  5,
	, "<img src='images/8.jpg' >", ,  10,  5,
	, "<img src='images/9.jpg' >", ,  25,  5,
	, "<img src='images/10.jpg' >", , 40,  5,
	, "<img src='images/11.jpg' >", ,-20, 15,
	, "<img src='images/12.jpg' >", , -5, 15,
	, "<img src='images/13.jpg' >", , 10, 15,
	, "<img src='images/14.jpg' >", , 25, 15,
	, "<img src='images/15.jpg' >", , 40, 15,
	, "<img src='images/16.jpg' >", ,-20, 25,
	, "<img src='images/17.jpg' >", , -5, 25,
	, "<img src='images/18.jpg' >", , 10, 25,
	, "<img src='images/19.jpg' >", , 25, 25,
	, "<img src='images/20.jpg' >", , 40, 25,
	, "<img src='images/1.jpg' >", , -20, -5,
	, "<img src='images/2.jpg' >", ,  -5, -5,
	, "<img src='images/3.jpg' >", ,  10, -5,
	, "<img src='images/4.jpg' >", ,  25, -5,
	, "<img src='images/5.jpg' >", ,  40, -5,
	, "<img src='images/6.jpg' >", , -20,  5,
	, "<img src='images/7.jpg' >", ,  -5,  5,
	, "<img src='images/8.jpg' >", ,  10,  5,
	, "<img src='images/9.jpg' >", ,  25,  5,
	, "<img src='images/10.jpg' >", , 40,  5,
	, "<img src='images/11.jpg' >", ,-20, 15,
	, "<img src='images/12.jpg' >", , -5, 15,
	, "<img src='images/13.jpg' >", , 10, 15,
	, "<img src='images/14.jpg' >", , 25, 15,
	, "<img src='images/15.jpg' >", , 40, 15,
	, "<img src='images/16.jpg' >", ,-20, 25,
	, "<img src='images/17.jpg' >", , -5, 25,
	, "<img src='images/18.jpg' >", , 10, 25,
	, "<img src='images/19.jpg' >", , 25, 25,
	, "<img src='images/20.jpg' >", , 40, 25,
	, "<img src='images/1.jpg' >", , -20, -5,
	, "<img src='images/2.jpg' >", ,  -5, -5,
	, "<img src='images/3.jpg' >", ,  10, -5,
	, "<img src='images/4.jpg' >", ,  25, -5,
	, "<img src='images/5.jpg' >", ,  40, -5,
	, "<img src='images/6.jpg' >", , -20,  5,
	, "<img src='images/7.jpg' >", ,  -5,  5,
	, "<img src='images/8.jpg' >", ,  10,  5,
	, "<img src='images/9.jpg' >", ,  25,  5,
	, "<img src='images/10.jpg' >", , 40,  5,
	, "<img src='images/11.jpg' >", ,-20, 15,
	, "<img src='images/12.jpg' >", , -5, 15,
	, "<img src='images/13.jpg' >", , 10, 15,
	, "<img src='images/14.jpg' >", , 25, 15,
	, "<img src='images/15.jpg' >", , 40, 15,
	, "<img src='images/16.jpg' >", ,-20, 25,
	, "<img src='images/17.jpg' >", , -5, 25,
	, "<img src='images/18.jpg' >", , 10, 25,
	, "<img src='images/19.jpg' >", , 25, 25,
	, "<img src='images/20.jpg' >", , 40, 25,
	

];

var camera, scene, renderer;
var controls;

var objects = [];
var targets = { table: [], sphere: [], helix: [], grid: [] };

init();
animate();

$(function () {
        $('#container').on('click', '.element', function () {
            var this_ = $(this);
			console.log(this_.index());
            var images = this_.parents('#container').find('.details');
            var imagesArr = new Array();
            $.each(images, function (i, image) {
                imagesArr.push($(image).children('img').attr('src'));
            });
            $.pictureViewer({
                images: imagesArr, //需要查看的图片，数据类型为数组
                initImageIndex: this_.index() + 1, //初始查看第几张图片，默认1
                scrollSwitch: true //是否使用鼠标滚轮切换图片，默认false
            });
        });
    });

</script>
</body>
</html>
